<template>
  <div class="parent-demo">
    <h2>👨 父组件</h2>
    <ChildDemo @msg-from-child="handleMsg" />
    <p v-if="msg" class="received-msg">✅ 收到消息：{{ msg }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildDemo from './ChildDemo.vue'

const msg = ref('')

function handleMsg(data) {
  msg.value = data
}
</script>

<style scoped>
.parent-demo {
  border: 2px solid #28a745;
  padding: 20px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 600px;
}
.received-msg {
  margin-top: 15px;
  padding: 10px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  color: #155724;
}
</style>
